<template>
  <section>
    <div class="scrollPhoto">
      <transition-group tag="ul" class='slide-ul' name="list">
        <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
          <a :href="list.clickUrl" >
            <img :src="list.image" :alt="list.desc">
          </a>
        </li>
      </transition-group>
      <div class="carousel-items">
        <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
      </div>
    </div>

    <div class="useWall">
      <div class="use1">
        <div class="blackcover" v-show="ubs"></div>
        <div class="b_main" v-show="ubs" @mouseleave="cutBC">
          <p>高校工作  一键报修</p>
        </div>
        <img @mouseenter="showBC" :src="LBTIMGBASE64.LBT1">
        <div>
          <p>故障报修</p>
        </div>
      </div>
      <div class="use1">
        <div class="blackcover" v-show="ubs1"></div>
        <div class="b_main" v-show="ubs1" @mouseleave="cutBC1">
          <span>校车里</span>
          <p>也许就是下一位国家领导者</p>
        </div>
        <img @mouseenter="showBC1" :src="LBTIMGBASE64.LBT2">
        <div>
          <p>家校通知</p>
        </div>
      </div>
      <div class="use1">
        <div class="blackcover" v-show="ubs2"></div>
        <div class="b_main" v-show="ubs2" @mouseleave="cutBC2">
          <p>家校通知</p>
        </div>
        <img @mouseenter="showBC2" :src="LBTIMGBASE64.LBT3">
        <div>
          <p>文件传阅</p>
        </div>
      </div>
    </div>

    <div class="cmain">
      <div class="c_item">
        <div class="c_header bg-purple shadow-p">
          <p class="f_white float l80">协同办公:</p>
          <ul>
            <li :class='{active:getit}' @click="changeTab1">
              <img :src="IMGBASE64.WEIWANCHENG2X">
              <p class="f_white l80">待完成</p>
            </li>
            <li :class='{active:getnone}' @click="changeTab2">
              <img :src="IMGBASE64.YIWANCHENG2X">
              <p class="f_white l80">已完成</p>
            </li>
          </ul>
        </div>
        <div class="chM">
          <ul class="cm_i1">
            <li v-for="item in cItem1">
              <img :src="IMGBASE64.XTBANGONG2X">
              <p>{{item.main}}</p>
              <span class="f-grey">{{item.massage}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="c_item">
        <div class="c_header bg-orange shadow-o">
          <p class="f_white l20 mt20">工作审批:</p>
          <span class="f_white">统计更新时间7:21</span>
        </div>
        <div class="chM">
          <ul class="cm_i2">
            <li>
              <p class="f-orange">名称</p>
              <span class="f-orange">状态</span>
              <strong class="f-orange">发起人</strong>
            </li>
            <li v-for="item in cItem2">
              <p>{{item.main}}</p>
              <span :class="item.type.css">{{item.type.main}}</span>
              <strong :class="item.status.css">{{item.status.main}}</strong>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default{
  data () {
    return {
      slideList: [{
        'clickUrl': '#',
        'desc': 'nhwc',
        'image': 'http://dummyimage.com/1745x492/f66574'
      }, {
        'clickUrl': '#',
        'desc': 'hxrj',
        'image': 'http://dummyimage.com/1745x492/40b7ea'
      }, {
        'clickUrl': '#',
        'desc': 'rsdh',
        'image': 'http://dummyimage.com/1745x492/e3c933'
      }],
      currentIndex: 0,
      timer: '',
      ubs: false,
      ubs1: false,
      ubs2: false,
      getit: true,
      getnone: false,
      cItem1: [{
        main: '关于学校暑假放假通知及教职工放假前期的工作安排',
        massage: '胡汉分配给你的'
      }, {
        main: '关于学校暑假放假通知及教职工放假前期的工作安排',
        massage: '胡汉分配给你的'
      }, {
        main: '关于学校暑假放假通知及教职工放假前期的工作安排',
        massage: '胡汉分配给你的'
      }],
      cItem2: [{
        main: '打印纸申领',
        type: {
          css: 'f-green',
          main: '审批通过'
        },
        status: {
          css: '',
          main: '我发起'
        }
      }, {
        main: '打印纸申领',
        type: {
          css: 'f-orange',
          main: '审批中'
        },
        status: {
          css: 'anoType',
          main: '审批'
        }
      }, {
        main: '打印纸申领',
        type: {
          css: 'f-red',
          main: '审批驳回'
        },
        status: {
          css: '',
          main: '我发起'
        }
      }, {
        main: '打印纸申领',
        type: {
          css: 'f-orange',
          main: '审批中'
        },
        status: {
          css: 'anoType',
          main: '审批'
        }
      }]
    }
  },
  mounted () {},
  methods: {
    changeTab1 () {
      this.getit = true
      this.getnone = false
    },
    changeTab2 () {
      this.getit = false
      this.getnone = true
    },
    showBC () {
      this.ubs = true
    },
    showBC1 () {
      this.ubs1 = true
    },
    showBC2 () {
      this.ubs2 = true
    },
    cutBC () {
      this.ubs = false
    },
    cutBC1 () {
      this.ubs1 = false
    },
    cutBC2 () {
      this.ubs2 = false
    },
    go () {
      this.timer = setInterval(() => {
        this.autoPlay()
      }, 4000)
    },
    stop () {
      clearInterval(this.timer)
      this.timer = null
    },
    change (index) {
      this.currentIndex = index
    },
    autoPlay () {
      this.currentIndex++
      if (this.currentIndex > this.slideList.length - 1) {
        this.currentIndex = 0
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.timer = setInterval(() => {
        this.autoPlay()
      }, 4000)
    })
  }
}
</script>

<style>
  @keyframes onmouseover {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.5;
    }
  }

  section .scrollPhoto{
    margin-top: 20px; margin-left: 2%;
    width: 96%; height: 300px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  }
  section .scrollPhoto .carousel-items{
    position: absolute; top: 280px; left: 50%;
    margin-left: -100px;
    width: 200px;
  }
  section .scrollPhoto .carousel-items .active{
    background: #ccc;
  }
  section .scrollPhoto .carousel-items span{
    display: inline-block;
    width: 40px; height: 4px;
    background: #fff;
    margin-left: 20px;
    border-radius: 4px;
  }
  section .scrollPhoto img{
    float: left;
    width: 100%; height: 300px;
    border-radius: 5px;
  }
  section .useWall{
    margin-top: 30px;
    margin-left: 2%;
    width: 96%; height: 270px;
    overflow: hidden;
  }
  section .useWall .use1{
    position: relative;
    float: left;
    margin-left: 1%;
    margin-right: 2.2%;
    width: 30%; height: 260px;
  }
  section .useWall .use1 .blackcover{
    z-index: 3;
    position: absolute; left: 4%; top: 0;
    width: 92%; height: 180px;
    background: #000;
    border-radius: 5px;
    opacity: 0.5;
    animation: onmouseover .6s;
  }
  section .useWall .use1 .b_main{
    z-index: 3;
    position: absolute; left: 4%; top: 0;
    width: 92%; height: 180px;
    background: none;
    color: #fff;
  }
  section .useWall .use1 .b_main span{
    display: inline-block;
    position: relative; top: 70px;
    width: 100%;
    text-align: center;
    font-size: 18px;
  }
  section .useWall .use1 .b_main p{
    text-align: center;
    position: relative; top: 0px; left: 0;
    margin-top: 80px;
    font-size: 18px;
  }
  section .useWall .use1 img{
    z-index: 2;
    position: absolute; left: 4%;
    width: 92%; height: 180px;
    border-radius: 5px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.14);
  }
  section .useWall .use1 div{
    z-index: 1;
    position: absolute; top: 30px;
    width: 100%; height: 230px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  }
  section .useWall .use1 div p{
    position: absolute; bottom: 30px; left: 4%;
    font-size: 18px;
  }
  section .cmain{
    margin-top: 30px;
    margin-left: 2%;
    width: 96%; height: 320px;
  }
  section .cmain .c_item:first-child{
    margin-right: 4%;
  }
  section .cmain .c_item{
    position: relative;
    float: left;
    width: 48%; height: 320px;
  }
  section .cmain .c_item .shadow-p{
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(159, 57, 181, 0.4);
  }
  section .cmain .c_item .shadow-o{
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(253, 151, 15, 0.4);
  }
  section .cmain .c_item .c_header{
    z-index: 2;
    position: absolute; left: 4%;
    width: 92%; height: 80px;
    border-radius: 5px;
  }
  section .cmain .c_item .c_header p{
    margin-left: 4%;
    margin-right: 2%;
    font-size: 16px;
  }
  section .cmain .c_item .c_header span{
    margin-left: 4%;
    font-size: 12px;
  }
  section .cmain .c_item .c_header ul{
    overflow: hidden;
  }
  section .cmain .c_item .c_header ul li{
    float: left;
    margin-top: 16px;
    width: 30%; height: 48px;
    border-radius: 5px;
    cursor: default;
  }
  section .cmain .c_item .c_header ul .active{
    background: #be74ca;
  }
  section .cmain .c_item .c_header ul li img{
    float: left;
    width: 20px; height: 20px;
    margin-left: 12%;
    margin-right: 6%;
    margin-top: 14px;
  }
  section .cmain .c_item .c_header ul li p{
    position: relative; top: -16px;
    font-size: 14px;
  }
  section .cmain .c_item .chM{
    z-index: 1;
    position: absolute; top: 20px;
    width: 100%; height: 300px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  }
  section .cmain .c_item .chM ul{
    margin-left: 6%;
    width: 88%;
  }
  section .cmain .c_item .chM .cm_i1{
    position: relative; top: 60px;
  }
  section .cmain .c_item .chM .cm_i1 li{
    border-bottom: 1px solid #ccc;
    height: 60px;
    margin-top: 20px;
    font-size: 14px;
  }
  section .cmain .c_item .chM .cm_i1 li:last-child{
    border-bottom: 0px;
  }
  section .cmain .c_item .chM .cm_i1 li img{
    width: 24px; height: 24px;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 4px;
  }
  section .cmain .c_item .chM .cm_i2{
    position: relative; top: 70px;
  }
  section .cmain .c_item .chM .cm_i2 li{
    font-size: 14px;
    margin-top: 10px;
    height: 36px;
    border-bottom: 1px solid #ccc;
  }
  section .cmain .c_item .chM .cm_i2 li:last-child{
    border-bottom: 0px;
  }
  section .cmain .c_item .chM .cm_i2 li p{
    float: left;
    width: 52%;
  }
  section .cmain .c_item .chM .cm_i2 li span{
    float: left;
    width: 24%
  }
  section .cmain .c_item .chM .cm_i2 li .anoType{
    position: relative; left: 6%;
    width: 12%; height: 22px;
    color: #fff;
    background: #40b5f4;
    border-radius: 5px;
    cursor: default;
  }
  section .cmain .c_item .chM .cm_i2 li strong{
    float: left;
    display: block;
    width: 24%;
    font-weight: normal;
    text-align: center;
  }
</style>
